<template>
  <div
    class="accounts"
    style="padding: 15px; box-sizing: border-box"
    v-loading="loading"
  >
    <VolHeader icon="md-apps" text="投诉管理" style="color: red">
      <div class="accounts_header">
        <el-input
          v-model="customerPhone"
          placeholder="请输入顾客联系电话"
          clearable
        ></el-input>
        <Button
          class="search_left"
          type="info"
          icon="md-search"
          @click="searchClick"
          >查询</Button
        >
        <Button
          class="search_right"
          type="info"
          icon="el-icon-search"
          @click="moreClick"
        >
          <Icon type="ios-arrow-down"></Icon>
        </Button>
        <!-- <Button type="success" icon="md-refresh" @click="refreshClick"
          >刷新</Button
        > -->
        <Button type="success" icon="md-create" @click="addClick()">查看</Button>
        <!-- <Button type="success" icon="md-create" @click="editClick()">编辑</Button> -->
        <!-- <Button type="warning" icon="md-close" @click="deleteClick()"
          >删除</Button -->
        <!-- > -->
        <export-excel :name="tableName" domName="exportExcel"></export-excel>
      </div>
    </VolHeader>
    <div class="accounts_table">
      <!-- 高级查询弹窗 -->
      <div class="search_box" v-show="searchBoxShow">
        <el-form :model="params" label-width="120px">
          <!-- <div class="search_form">
            <el-form-item label="顾客联系电话：">
              <el-input
                v-model="params.customerPhone"
                placeholder="请输入顾客联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="顾客姓名：">
              <el-input
                v-model="params.customerName"
                placeholder="请输入顾客名称"
              ></el-input>
            </el-form-item>

            <el-form-item label="创建时间：">
              <el-input
                v-model="params.createDate"
                placeholder="请输入创建时间"
              ></el-input>
            </el-form-item>
          </div> -->
          <!-- <div class="search_form">
            <el-form-item label="联系人电话：">
              <el-input
                v-model="params.phone"
                placeholder="请输入联系人电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态：">
              <el-select v-model="params.isvalid" placeholder="请选择账户状态">
                <el-option label="有效" value="1"></el-option>
                <el-option label="无效" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label=""> </el-form-item> 
          </div>-->
          <div class="search_btn">
            <Button type="info" ghost @click="searchClick">
              <Icon type="md-search" />查询
            </Button>

            <Button type="success" ghost @click="resetSearch">
              <Icon type="md-refresh" />重置
            </Button>
            <Button
              type="warning"
              ghost
              @click="searchBoxShow = !searchBoxShow"
            >
              <Icon type="md-power" />关闭
            </Button>
          </div>
        </el-form>
      </div>
      <div class="content" >
        <!-- 表格  -->
        <el-table
          v-show="false"
          ref="multipleTable"
          :row-style="isRed"
          @selection-change="handleSelectionChange"
          border
          id="exportExcel"
          @row-click="onRowClick"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          min-width="100%"
          class="v-table"
          max-height="500"
          default-expand-all
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            type="selection"
            :fixed="true"
            :selectable="checkboxSelect"
            width="55"
          ></el-table-column>
          <div v-for="(column, cindex) in columns" :key="cindex">
            <el-table-column
              v-if="column.field == 'complaintStatus'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.complaintStatus == 1 ? "已处理" : "未处理"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'isRef'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.isRef == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'isRead'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.isRead == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
              <!--  <el-table-column
              v-else-if="column.field == 'imgUrl'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
           <template slot-scope="scope">
                <div
                  v-for="(column, cindex) in scope.row.imgUrl.split(',')"
                  :key="cindex"
                  style="float:left;overflow: hidden;
                   border:none;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  "
                >
                  <div v-if="column != ''">
                    <img
                      style="  height: 40px;
                      border-radius: 5px;
                      margin-right: 10px;
                       width: 40px;
                      object-fit: cover;"
                      :src="`${yuming}${column}`"
                    />
                  </div>
                </div>
              </template> 
            </el-table-column>-->
            <el-table-column
              v-else-if="column.field == 'auditStatus'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.auditStatus == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </div>
        </el-table>
        <el-table
          ref="multipleTable"
          :row-style="isRed"
          border
          @row-click="onRowClick"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          min-width="100%"
          class="v-table"
          max-height="500"
          default-expand-all
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            type="selection"
            :fixed="true"
            :selectable="checkboxSelect"
            width="55"
          ></el-table-column>
          <div v-for="(column, cindex) in columns" :key="cindex">
            <el-table-column
              v-if="column.field == 'complaintStatus'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{
                  scope.row.complaintStatus == 1 ? "已处理" : "未处理"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'isRef'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.isRef == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'isRead'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.isRead == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
               <el-table-column
              v-else-if="column.field == 'imgUrl'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
           <template slot-scope="scope">
                <div
                  v-for="(column, cindex) in scope.row.imgUrl.split(',')"
                  :key="cindex"
                  style="float:left;overflow: hidden;
                    border:none;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  "
                >
                  <div v-if="column != ''">
                    <img
                      style="  height: 40px;
                      border-radius: 5px;
                      margin-right: 10px;
                       width: 40px;
                      object-fit: cover;"
                      :src="`${yuming}${column}`"
                    />
                  </div>
                </div>
              </template> 
            </el-table-column>
            <el-table-column
              v-else-if="column.field == 'auditStatus'"
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.auditStatus == 0 ? "是" : "否" }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :prop="column.field"
              :label="column.title"
              :min-width="column.width"
              :fixed="column.fixed"
              :align="column.align"
              :sortable="column.sort ? 'custom' : false"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </div>
        </el-table>
      </div>
      <!-- 分页  -->
    </div>
    <div class="paginat">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[30, 60, 90]"
        :page-size="params.count"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 新建弹窗 -->
    <!-- <AccountsAdd ref="complaintAdd"> </AccountsAdd> -->
    <complaintAdd ref="complaintAdd"  :searchRow="searchRow"></complaintAdd>
    <!-- 详情弹窗 -->
    <Details ref="details"></Details>
  </div>
</template>
<script>
export default {
  components: {
    VolForm: () => import("@/components/basic/VolForm.vue"),
    VolHeader: () => import("@/components/basic/VolHeader.vue"),
    VolTable: () => import("@/components/basic/VolTable.vue"),
    complaintAdd: () => import("@/views/mall/complaint/complaintAdd.vue"),
    Details: () => import("@/extension/mall/account/AccountsMain/details.vue"),
    ExportExcel: () => import("@/components/basic/ExportExcel.vue")
  },
  data() {
    return {
      tree: [],
      tableHeight: 768,
      height: 0, //表格高度
      searchBoxShow: false, //查询弹窗显隐
      loading: false, // 加载
      ck: false,
      searchRow: {},
      //  分页
      currentPage: 1, // 当前页数
      total: 0, // 总条数
      pageSize: 30, //每页条数
      // 用户信息
      user: {},
      //查询条件
      customerPhone:"",
 
      tableName: "投诉管理",
      yuming: "https://qt.forlonggroup.net/",
      // 列表数据
      tableData: [],
      selectedArrData: [],
      columns: [
        {
          field: "customerName",
          title: "顾客姓名",
          type: "string",
          width: 260,
          align: "left"
        },
        {
          field: "customerPhone",
          title: "顾客联系电话",
          type: "string",
          width: 110,
          align: "left"
        },
        {
          field: "auditDate",
          title: "审核日期",
          type: "datetime",
          width: 120,
          align: "left",
          sortable: true
        },

        {
          field: "auditor",
          title: "审核员",
          type: "string",
          width: 180,
          align: "left"
        },
        {
          field: "auditreason",
          title: "审核原因",
          type: "string",
          width: 220,
          align: "left"
        },
        {
          field: "auditStatus",
          title: "审核状态",
          type: "int",
          width: 90,
          require: true,
          align: "left"
        },
        {
          field: "complaintContent",
          title: "反馈内容",
          type: "string",
          width: 230,
          align: "left"
        },
        {
          field: "complaintStatus",
          title: "处理状态",
          bind: {
            key: "",
            data: [{ key: 1, value: "已处理" }, { key: 2, value: "未处理" }]
          },
          type: "int",
          width: 90,
          align: "left"
        },
        {
          field: "imgUrl",
          title: "反馈图片",
          type: "img",
          width: 180,
          align: "left"
        },
        {
          field: "isRead",
          title: "是否已读",
          bind: { key: "enable", data: [] },
          type: "sbyte",
          width: 90,
          align: "left"
        },
        {
          field: "isRef",
          title: "是否回复",
          bind: { key: "enable", data: [] },
          type: "sbyte",
          width: 90,
          align: "left"
        },
        {
          field: "parentid",
          title: "父级ID",
          type: "int",
          width: 90,
          align: "left"
        },
        {
          field: "id",
          title: "ID",
          type: "int",
          width: 90,
          align: "left"
        },
        {
          field: "transfer",
          title: "接收人",
          type: "string",
          width: 220,
          align: "left"
        },
        {
          field: "transferDate",
          title: "传递时间",
          type: "datetime",
          width: 90,
          align: "left",
          sortable: true
        },
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 90,
          align: "left",
          sortable: true
        },

        {
          field: "creator",
          title: "创建人名称",
          type: "string",
          width: 180,
          align: "left"
        },
        {
          field: "modifier",
          title: "修改人名称",
          type: "string",
          width: 180,
          align: "left"
        },

        {
          field: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 90,
          align: "left",
          sortable: true
        }
      ],
      //  图
      items: [],
      params:{}
    };
  },
  created() {
    this.AccountsGet();
    if (sessionStorage.getItem("user")) {
      this.user = JSON.parse(sessionStorage.getItem("user"));
    }
    this.getTableMaxHeight();
  },
  mounted() {
    //获取容器当前高度，重设表格的最大高度
    this.getTableMaxHeight();
    let _this = this;
    window.onresize = function() {
      //用于使表格高度自适应的方法
      _this.getTableMaxHeight(); //获取容器当前高度，重设表格的最大高度
    };
  },
  methods: {
    checkboxSelect(e, i) {
      if (e.DISABLED) {
        return false;
      } else {
        return true;
      }
    },
    getTableMaxHeight() {
      this.$nextTick(function() {
        let box = document.querySelector(".content").attributes;
        let box_clientHeight = box[0].ownerElement.clientHeight;
        this.tableHeight = box_clientHeight + 50;
      });
    },
    // 列表接口
    AccountsGet() {
      console.log(this.params,"this.params")
      if(this.customerPhone==""){
        this. params= {
        page: 1,
        rows: "2147483647",
        sort: "id",
        order: "desc",
        wheres: "[]"
      }
      }else{
        this. params= {
        page: 1,
        rows: "2147483647",
        sort: "id",
        order: "desc",
        wheres: `[{\"name\":\"customerPhone\",\"value\":\"${this.customerPhone}\",\"displayType\":\"like\"}]`
      }
      }
      this.loading = true;
      this.http
        .post("api/Small_complaint/getPageData",this.params, false)
        .then(res => {
          console.log(res.rows, "res");
          if (res.status != 0) {
            this.$message.error("请求失败");
            this.loading = false;
            return;
          }
          this.tree = [];
          // 2.定义一个空对象
          const otherObj = {};
          // 3.遍历数组内所有对象
          res.rows.forEach(item => {
            // 3.1.给每个当前对象添加一个 children 属性, 以便存放子级对象
            item.children = [];
            // 3.2 将当前对象的 id 作为键, 与当前对象自身形成键值对
            otherObj[item.id] = item;
          });
          // 4.再次遍历数组内所有对象
          res.rows.forEach(item => {
            // 4.1.判断每个当前对象的 pid, 如当前对象 pid 不为0, 则说明不是最上级的根对象
            if (item.parentid == 0) {
              this.tree.push(item);
            } else {
              otherObj[item.parentid].children.push(item);
            }
          });
          // console.log(this.tree, "this.tree");
          this.tableData = this.tree;
          this.total = this.tree.length;
          this.loading = false;
          this.searchBoxShow = false;
        })
        .catch(() => {
          this.loading = false;
          this.searchBoxShow = false;
        });
    },
    // 查询按钮
    searchClick() {
      // this.params.page = 0;
      // this.params.rows = 30;
      this.AccountsGet();
    },
    // 更多按钮
    moreClick() {
      this.searchBoxShow = this.searchBoxShow ? false : true;
    },
    rowClick({ row, column, event }) {
      this.$refs.table.$refs.table.toggleRowSelection(row);
    },
    // 刷新按钮
    // refreshClick() {
    //   (this.params = {
    //     page: 1,
    //     rows: "2147483647",
    //     sort: "id",
    //     order: "desc",
    //     wheres: "[]"
    //   }),
    //     this.AccountsGet();
    //   this.getTableMaxHeight();
    // },
    // 新建按钮
    addClick() {
      this.$refs.complaintAdd.open(1);
    },
    //获取选中的行数据
    onRowClick(row, event, column) {
      this.$refs.multipleTable.toggleRowSelection( row)
      this.$nextTick(()=>{  
         this.searchRow = row;
       
        })
      
   
    },
    // 点击勾选复选框
    handleSelectionChange() {
      //打印出来的数据 就是勾选获取的勾选那一行的数据
      // console.log(this.$refs.multipleTable.selection, "124");
      // /// 遍历了 勾选获取的那一行数据 然后 赋值给我自己定义的yilist这个数组了
      // this.yilist = this.$refs.multipleTable.selection.map(item => item.id);
      // // 现在yilist 这个数组 就是由我勾选每一行的id组成的数组了 这个数组里全是勾选那行的id
      // console.log(this.yilist, 777);
    },
    //选中行变颜色
    isRed({ row }) {
      const checkIdList = this.selectedArrData.map(item => item.id);
      if (checkIdList.includes(row.id)) {
        return {
          backgroundColor: "#DE6",
          color: "red"
        };
      }
    },

    // 重置按钮
    resetSearch() {
      (this.params = {
        page: 1,
        rows: "2147483647",
        sort: "id",
        order: "desc",
        wheres: "[]"
      }),
        this.AccountsGet();
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    }
  }
};
</script>
<style lang="less" scoped>
.el-table__body tr.current-row > td {
  background-color: #e4e6eb !important;
  color: #82aaf1 !important;
}
.div {
  width: 360px;
  text-align: center;
  line-height: 50px;
  background-image: linear-gradient(
    to right bottom,
    #edb35d,
    #006fe4,
    #86cd62f5
  );
}
.v-header {
  border: none !important;
  margin-bottom: 11px;
}
.accounts {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .accounts_header {
    display: flex;
    align-items: center;

    .el-input {
      flex: 1;
      margin: 0 20px 0 80px;
      height: 32px;
    }
    button {
      margin-left: 10px;
    }
    .search_left {
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
    }
    .search_right {
      margin-left: 0px;
      padding-left: 0px;
      padding-right: 5px;
      border-bottom-left-radius: 0px;
      border-left: 1px solid #eee;
      border-top-left-radius: 0;
    }
  }
  .accounts_table {
    position: relative;
    height: 100%;
    .search_box {
      background: #fefefe;
      border: 1px solid #ececec;
      position: absolute;
      z-index: 999;
      left: 15px;
      right: 15px;
      padding: 25px 20px;
      padding-bottom: 0;
      -webkit-box-shadow: 0 7px 18px -12px #bdc0bb;
      box-shadow: 0 7px 18px -12px #bdc0bb;
      .search_form {
        display: flex;
      }
      .search_btn {
        text-align: right;
        padding-bottom: 24px;
        button {
          margin-left: 10px;
        }
      }
    }
  }
  .paginat {
    text-align: right;
    padding: 2px 28px;
    border: 1px solid #eee;
    border-top: 0px;
    margin-bottom: 15px;
    box-sizing: border-box;
  }
  .content {
    width: 100%;
    height: calc(100% - 3rem);
  }
}
</style>
<style scoped>
.pagination {
  text-align: right;
  /* margin-top: 8px; */
  padding: 2px 28px;
  border: 1px solid #eee;
  border-top: 0px;
}
.v-table >>> .el-table__header th {
  padding: 0px !important;
  background-color: #f8f8f9 !important;
  font-size: 13px;
  height: 41px;
  color: #616161;
}
.v-table >>> .el-table__header th.is-sortable {
  padding: 3px !important;
}
.vol-table.text-inline >>> .el-table__body .cell {
  word-break: inherit !important;
  white-space: nowrap !important;
}
.v-table >>> .el-table__body td {
  padding: 9px 0 !important;
}

.v-table >>> .el-table__footer td {
  padding: 7px 0 !important;
}
/* 2021.01.30修复火狐checkbox错位问题 */
.vol-table >>> .el-table-column--selection .cell {
  display: inline;
}
.vol-table.text-inline >>> .el-table th > .cell {
  white-space: nowrap !important;
}
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ddd;
}
.vol-table .table-img {
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  width: 40px;
  object-fit: cover;
}
.vol-table .table-img:hover {
  cursor: pointer;
}
.v-table >>> .ivu-tag-default {
  border: none !important;
  background: none !important;
}
/* .v-table >>> .el-table__fixed-body-wrapper {
  top: 41px !important;
} */
.v-table >>> .el-table__fixed:before {
  border-color: none !important;
}
</style>
